// ui/components/LogEntryListItem.js
// Assuming ElementPlus components (ElIcon) and icons (ChatDotSquare) are globally available.

export default {
  name: 'LogEntryListItem',
  // components: { ElIcon, ChatDotSquare }, // Not needed if globally registered
  props: {
    entry: {
      type: Object, // Was PropType<LLMLogEntrySummaryModel>
      required: true
      // JSDoc for reference:
      /**
       * @type {{
       *   log_entry_id: string;
       *   timestamp_call_start: string;
       *   llm_call_type: string;
       *   outcome_summary: string;
       *   has_public_message: boolean;
       * }}
       */
    }
  },
  emits: ['view-detail'],
  setup(props, { emit }) {
    const { computed } = Vue; // Vue is global

    function handleViewDetail() {
      emit('view-detail', props.entry.log_entry_id);
    }

    const formattedTimestamp = computed(() => {
      try {
        const date = new Date(props.entry.timestamp_call_start);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      } catch (e) {
        console.error("Failed to format timestamp:", props.entry.timestamp_call_start, e);
        return String(props.entry.timestamp_call_start); // Fallback
      }
    });

    const callTypeDisplay = computed(() => {
      switch (props.entry.llm_call_type) {
        case 'active_listening': return '主动聆听';
        case 'public_speech': return '公开发言';
        default: return String(props.entry.llm_call_type);
      }
    });

    return {
      // props are automatically available
      handleViewDetail,
      formattedTimestamp,
      callTypeDisplay,
    };
  },
  template: `
  <li class="log-entry-list-item" @click="handleViewDetail" :title="\`点击查看详情: \${entry.llm_call_type}\`">
    <div class="entry-header">
      <span class="timestamp">{{ formattedTimestamp }}</span>
      <span class="call-type">{{ callTypeDisplay }}</span>
    </div>
    <div class="outcome-summary">
      {{ entry.outcome_summary }}
    </div>
    <div v-if="entry.has_public_message" class="public-message-indicator" title="此轮产生了公开消息">
      <el-icon :size="14" style="margin-right: 3px;"><ChatDotSquare /></el-icon>
      <span>公开</span>
    </div>
  </li>
  `
};